"use client";
import { ChildItem, getPromoteList } from "@/api/activity";
import { formatAmount } from "@/utils";
import { Button, DotLoading, InfiniteScroll, Input, List } from "antd-mobile";
import clsx from "clsx";
import dayjs from "dayjs";
import React, { useState } from "react";
import styles from "./page.module.scss";

const InfiniteScrollContent = ({ hasMore }: { hasMore?: boolean }) => {
    return (
        <>
            {hasMore ? (
                <>
                    <span>Loading</span>
                    <DotLoading />
                </>
            ) : (
                <span>Não mais</span>
            )}
        </>
    );
};

const Detail = () => {
    const [data, setData] = useState<ChildItem[]>([]);
    const [hasMore, setHasMore] = useState(false);
    async function loadMore() {
        getData();
        // setHasMore(true);
    }

    React.useEffect(() => {
        getData();
    }, []);
    const getData = async () => {
        const res = await getPromoteList();
        if (res.code === 200) {
            setData(res.data);
        }
    };

    return (
        <div className={styles.detail}>
            <div className={clsx("m-[.15rem] flex items-center", styles.searchbox)}>
                <Input placeholder="Por favor, insira o ID"></Input>
                <div className="ml-[.1rem]">
                    <Button size="middle">
                        <i className="iconfont icon-sousuo2"></i>
                    </Button>
                </div>
            </div>
            <div className={styles.container}>
                <div className={clsx(styles.item)}>
                    <div>Tempo</div>
                    <div>
                        ID do <br /> membro
                    </div>
                    <div>Valor do depósito</div>
                    <div>Número de depósitos</div>
                    <div>
                        Apostas <br /> Válidas
                    </div>
                </div>
                <List>
                    {data.map((item, index) => (
                        <List.Item key={index}>
                            <div className={clsx(styles.item)}>
                                <div>
                                    {dayjs(item.create_at * 1000).format("YYYY-MM-DD HH:mm:ss")}
                                </div>
                                <div>{item.renter_uid}</div>
                                <div className="text-[#309a1f_!important]">
                                    {formatAmount(item.deposit)}R$
                                </div>
                                <div>{item.deposit_time}</div>
                                <div>{item.total_bet}</div>
                            </div>
                        </List.Item>
                    ))}
                </List>
                <InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
                    <InfiniteScrollContent hasMore={hasMore} />
                </InfiniteScroll>
            </div>
        </div>
    );
};

export default Detail;